<template>
  <!-- 工艺明细 -->
  <div class="pr processDetail">
    <a-spin :spinning="spinning">
      <a-row :gutter="12">
        <a-col :span="6">
          <h5 class="fs14">设计图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.styleFiles"
              middle
              module-name="styleFiles"
              :disabled="calcModuleDisable('styleFiles')"
              :limit-num="3"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <h5 class="fs14">彩色设计图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.printFiles"
              middle
              module-name="printFiles"
              :disabled="calcModuleDisable('printFiles')"
              :limit-num="3"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <h5 class="fs14">线稿图</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              v-model:files="designInfo.lineFiles"
              middle
              :limit-num="3"
              module-name="lineFiles"
              :disabled="calcModuleDisable('lineFiles')"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <h5 class="fs14">杯型指南</h5>
          <div>
            <oss-upload
              :islazyLoad="false"
              module-name="cupGuides"
              v-model:files="designInfo.cupGuides"
              :limit-num="1"
              :size="5"
              :disabled="calcModuleDisable('cupGuides')"
              :multiple="false"
              accept=".png,.jpg,.jpeg,.gif"
              middle
              list-type="picture-card"
            />
          </div>
        </a-col>
      </a-row>

      <a-row>
        <h5 class="fs14">车缝细节</h5>
        <column-Table
          module-name="commentVos"
          :row-key="(record, i) => Math.random() + 'commentVos'"
          :source="designInfo.commentVos"
          tableName="commentVos"
          :disabled="calcModuleDisable('commentVos')"
          @operator="operator"
          @addLine="tableName => addRow(tableName)"
          :columns="commentVosColumns"
        >
          <template #sketchImg="{ record }">
            <a-row type="flex" align="middle">
              <oss-upload
                v-model:files="record.sewingImgList"
                :limit-num="1"
                small
                is-drawing
                preview-mount-global
                :disabled="designInfo.disabled"
                list-type="picture-card"
              />
              <a-button
                v-if="!designInfo.disabled"
                size="small"
                @click="syncFitImg(record)"
                type="primary"
              >
                同步
              </a-button>
            </a-row>
          </template>
          <template #ossList="{ record }">
            <oss-upload
              v-model:files="record.ossList"
              small
              list-type="picture-card"
              :size="20"
              :disabled="designInfo.disabled"
              accept="png,jpg,jpeg,gif"
            ></oss-upload>
          </template>
        </column-Table>
      </a-row>
      <a-row>
        <h5 class="fs14">翻单优化</h5>
        <column-Table
          module-name="optimizeVos"
          :row-key="(record, i) => Math.random() + 'optimizeVos'"
          :source="designInfo.optimizeVos"
          tableName="optimizeVos"
          disabled
          :columns="optimizeVosColumns"
        >
          <template #ossList="{ record }">
            <oss-upload
              v-model:files="record.ossList"
              small
              list-type="picture-card"
              :size="20"
              disabled
              accept="png,jpg,jpeg,gif"
            ></oss-upload>
          </template>
        </column-Table>
        <a-button
          v-if="!calcModuleDisable('optimizeVos')"
          style="margin-top: 8px"
          type="dashed"
          block
          size="small"
          @click="addOptimizeLine"
        >
          <template #icon><PlusOutlined /></template>
          添加
        </a-button>
      </a-row>

      <a-row class="mt10 db">
        <h5 class="fs14 mb10">标注图及尺寸图</h5>
        <a-row
          :gutter="24"
          style="min-height: 320px; max-hegiht: 400px; padding-right: 12px"
        >
          <a-col :lg="8" :xxl="6" :md="8" style="width: 33.3%">
            <a-carousel
              :dots="false"
              :key="new Date().getTime()"
              arrows
              class="mb10 myCarousel"
              style="height: 395px"
              v-if="
                imgList.length &&
                imgList.length === designInfo.sizeLineFile.length
              "
            >
              <div
                v-for="(item, index) in imgList"
                :key="item.ossUrl"
                :data-index="index - 1"
                class="tac lh395"
              >
                <img
                  :src="item.ossUrl"
                  alt=""
                  srcset=""
                  style="
                    max-height: 100%;
                    max-width: 100%;
                    text-align: center;
                    display: inline;
                  "
                />
              </div>
              <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 0; zindex: 1">
                  <LeftOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 0">
                  <RightOutlined />
                </div>
              </template>
            </a-carousel>
            <div class="mb10" style="height: 395px" v-else>
              <img
                src="@/assets/img/no-picture.png"
                style="height: 100%"
                alt=""
              />
            </div>
            <oss-upload
              :limitNum="isLargeProcess ? 4 : 1"
              module-name="sizeLineFile"
              v-model:files="designInfo.sizeLineFile"
              list-type="picture-card"
              :disabled="calcModuleDisable('sizeLineFile')"
              accept=".png,.jpg,.jpeg"
              class="uploadImg"
            ></oss-upload>
          </a-col>

          <a-col
            :lg="16"
            :xxl="18"
            :md="16"
            style="
              padding-right: 0;
              padding-left: 0;
              overflow: auto;
              margin-top: -28px;
              width: 66.6%;
            "
          >
            <div>
              <a-row style="margin-bottom: 3px" justify="space-between">
                <a-checkbox-group
                  :disabled="calcModuleDisable('charts')"
                  v-model:value="designInfo.checkParts"
                  @change="handleChangePart"
                >
                  <a-checkbox
                    v-for="item in partOptions"
                    :key="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  >
                    {{ item.label }}
                  </a-checkbox>
                </a-checkbox-group>
                <div
                  class="weightProcess"
                  v-if="
                    !calcModuleDisable('syncWeight') &&
                    isAutoCalcWeight &&
                    designInfo?.sampleSize
                  "
                >
                  <div class="df aic">
                    <a-tag color="#f50">
                      {{ designInfo.sampleSize }}
                    </a-tag>
                    <span>样衣重量：</span>
                    <a-input-number
                      :min="0"
                      v-model:value="weightState.sampleGarmentWeight"
                      style="width: 120px"
                      placeholder="请输入"
                      allow-clear
                    />

                    <a-button
                      size="small"
                      class="ml4"
                      type="primary"
                      @click="autoCalcWeight"
                    >
                      自动计算
                    </a-button>
                    <a-popover
                      title="计算过程"
                      placement="bottomRight"
                      v-model:visible="weightState.isShowWeightProcess"
                      trigger="click"
                    >
                      <template v-slot:content>
                        <div class="w600">
                          <h4>计算核对：</h4>
                          <a-table
                            bordered
                            :pagination="false"
                            size="small"
                            :columns="weightState?.sampleDressColumns"
                            :data-source="weightState.sampleComputeLine"
                          >
                            <template
                              v-for="item in weightState?.highlightSizeList"
                              :key="item"
                              v-slot:[item]="{ record, index }"
                            >
                              <div
                                v-if="index === 0"
                                style="background: #fffaed"
                              >
                                {{ record[item] }}
                              </div>
                            </template>
                            <template #footer>
                              <div class="df jcsb">
                                <span>{{ weightState.compareSize }}码系数</span>
                                <span>{{ weightState.compareRate }}</span>
                              </div>
                            </template>
                          </a-table>
                          <h4>品牌+包装类重量：</h4>
                          <a-table
                            bordered
                            :pagination="false"
                            size="small"
                            :columns="weightState?.packageWeighColumns"
                            :data-source="weightState?.packageWeighList"
                          >
                            <template
                              v-for="item in weightState.packageWeighColumns"
                              v-slot:[item.slots?.customRender]="{
                                text,
                                record
                              }"
                              :key="item"
                            >
                              <div
                                :style="{
                                  background:
                                    record.highlight === 1 ? '#FFFAED' : ''
                                }"
                              >
                                {{ text }}
                              </div>
                            </template>
                          </a-table>
                        </div>
                      </template>
                      <QuestionCircleOutlined class="ml10" />
                    </a-popover>
                  </div>
                </div>
                <SettingOutlined
                  v-if="showSetting && !calcModuleDisable('charts')"
                  style="cursor: pointer"
                  type="setting"
                  @click=";(showSizeConfig = true), getConfigSize()"
                />
              </a-row>
              <div v-if="showExcel" class="w100p" style="overflow: auto">
                <excelTable
                  ref="excelTable"
                  :editable="!calcModuleDisable('charts')"
                  :excel-id="jexcelSize"
                  :source="designInfo.excelSource || []"
                  :columns="designInfo.excelColumns"
                  :hight-lights="designInfo.coordinatesReqs"
                  :delete-lists="delteItems"
                  @deleteLights="deleteHight"
                  @changeY="changeHightLight"
                  @addLight="addHightLight"
                  @clear="clearHight"
                  @empty="emptyList"
                  :showSetting="showSetting"
                  :cpSizeVos="designInfo.cpSizeVos"
                  :sizeChartData="designInfo.sizeChartData"
                />
                <a-form
                  class="weight-form"
                  v-if="showWeight && designInfo.excelColumns?.length"
                >
                  <div class="aic df">
                    <span style="width: 200px" class="tal pl10">毛重（g）</span>
                    <a-button
                      v-if="!calcModuleDisable('syncWeight')"
                      type="link"
                      style="width: 260px; color: #1890ff"
                      class="tar pr10"
                      @click="syncWeight"
                      >同步毛重</a-button
                    >
                    <div style="width: 260px; color: #1890ff" v-else></div>
                    <span
                      v-for="item in designInfo.sizeCodeList"
                      :key="item"
                      style="width: 80px"
                    >
                      <a-form-item style="margin-bottom: 0">
                        <a-input-number
                          :disabled="calcModuleDisable('syncWeight')"
                          v-model:value="weightInfo[item]"
                          :min="0"
                          style="width: 90%"
                        />
                      </a-form-item>
                    </span>
                    <span style="width: 143px" />
                  </div>
                </a-form>
              </div>
              <div class="mt10">参考链接：{{ designInfo.referenceLink }}</div>
            </div>
          </a-col>
        </a-row>
      </a-row>
      <a-row class="mt10">
        <a-col :span="24">
          <h5 class="fs14">纸样截图</h5>
          <div>
            <oss-upload
              v-model:files="designInfo.patternScreenshots"
              middle
              :disabled="calcModuleDisable('patternScreenshots')"
              :limit-num="3"
              accept=".png,.jpg,.jpeg,.gif"
              list-type="picture-card"
            />
          </div>
        </a-col>
      </a-row>
      <a-row class="mt10">
        <h5 class="fs14">工艺说明</h5>

        <a-table
          :row-key="(record, i) => i + 'descVos'"
          :scroll="{ x: ' 100%' }"
          :data-source="designInfo.descVos"
          :pagination="false"
          :columns="[
            { title: $t('plm_no.'), dataIndex: 'seqNo', width: '60px' },
            { title: '说明', maxLength: 50, dataIndex: 'sheetDes' }
          ]"
        />
      </a-row>
      <a-row class="mt10">
        <h5 class="fs14">裁剪要求</h5>
        <a-table
          :row-key="(record, i) => i + 'cropVos'"
          :scroll="{ x: ' 100%' }"
          :data-source="designInfo.cropVos"
          :pagination="false"
          :columns="[
            { title: $t('plm_no.'), dataIndex: 'seqNo', width: '60px' },
            { title: '说明', maxLength: 50, dataIndex: 'msg' }
          ]"
        />
      </a-row>
      <a-row :gutter="24" class="mt10">
        <a-col :span="12">
          <h5 class="fs14">花稿</h5>
          <oss-upload
            class="col1"
            :disabled="calcModuleDisable('flowerFiles')"
            v-model:files="designInfo.flowerFiles"
            is-dragger
          />
        </a-col>
        <a-col :span="12">
          <div class="flex justify-between">
            <h3 class="inline-block">纸样</h3>
            <a-button size="small" type="link" @click="showUploadLog"
              >上传日志</a-button
            >
          </div>
          <oss-upload
            class="col1"
            :disabled="calcModuleDisable('territoryFiles')"
            v-model:files="designInfo.territoryFiles"
            is-dragger
          />
        </a-col>
      </a-row>
      <slot></slot>
      <a-modal
        v-model:visible="uploadLogsVoisible"
        :width="1000"
        title="上传日志"
      >
        <template v-slot:footer>
          <a-button key="back" type="info" @click="uploadLogsVoisible = false">
            关闭
          </a-button>
        </template>
        <a-table
          size="small"
          bordered
          :columns="uploadLogsColumns"
          :data-source="uploadLogsData"
          :pagination="false"
        >
          <template #action="{ record }">
            <a-space>
              <a-button
                size="small"
                type="link"
                @click="toDownload(record.ossUrl)"
                >下载</a-button
              >
            </a-space>
          </template>
        </a-table>
      </a-modal>
      <a-modal
        v-model:visible="showSizeConfig"
        title="尺码计算规则配置"
        ok-text="保存"
        cancel-text="取消"
        class="small"
        width="600px"
        @ok="saveSizeConfig"
      >
        <a-table
          bordered
          :columns="[
            {
              key: 'sizeRange',
              dataIndex: 'sizeRange',
              title: '尺码范围',
              slots: { customRender: 'sizeRange' }
            },
            {
              key: 'countColumn',
              dataIndex: 'countColumn',
              title: '计算列',
              slots: { customRender: 'countColumn' }
            },
            {
              key: 'action',
              dataIndex: 'action',
              title: '操作',
              slots: { customRender: 'action' }
            }
          ]"
          :data-source="sizeConfigDatas"
          :pagination="false"
          :row-key="(record, index) => index"
        >
          <template #sizeRange="{ record }">
            <a-select v-model:value="record.sizeStart" class="w40p">
              <a-select-option
                v-for="item in sizeModels"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
            <span style="margin: 0 10px">-</span>
            <a-select v-model:value="record.sizeEnd" class="w40p">
              <a-select-option
                v-for="item in sizeModels"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </template>
          <template #countColumn="{ record }">
            <a-select v-model:value="record.sizeBase" class="w100p">
              <a-select-option
                v-for="item in sizeModels"
                :key="item"
                :value="item"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </template>
          <template #action="{ index }">
            <a-button type="link" @click="sizeConfigDatas.splice(index, 1)">
              删除
            </a-button>
          </template>
        </a-table>
        <div class="add-btn" @click="addLine">+ 添加</div>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import {
  useProcessSheet,
  useHightLight,
  useManagerModuleDisplay,
  useProps,
  useInit,
  useCalcWeight,
  useSewing
} from '@/hook/processSheet.js'
import { toRefs, onMounted, watch, ref } from 'vue'

import {
  LeftOutlined,
  RightOutlined,
  QuestionCircleOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import { downloadFile } from 'utils/file.js'
import {
  cp_card_update_config_size_post,
  cp_card_list_paper_log_get
} from 'server/modules/4494.js'
import { message } from 'ant-design-vue'
export default {
  components: {
    LeftOutlined,
    RightOutlined,
    QuestionCircleOutlined,
    SettingOutlined
  },
  props: useProps,
  emits: ['update:data'],
  setup(props, { emit }) {
    const {
      jexcelSize,
      processState,
      processMethods,
      partOptions,
      calcModuleDisable,
      imgList,
      weightInfo
    } = useProcessSheet(props)
    processState.weightInfo = weightInfo
    const toDownload = url => {
      downloadFile(url)
    }
    const uploadLogsColumns = [
      {
        title: '序号',
        dataIndex: 'index',
        width: 60,
        align: 'center',
        customRender: ({ index }) => index + 1
        // slots: { customRender: 'index' }
      },
      {
        title: '纸样文件',
        dataIndex: 'ossName',
        key: 'ossName'
      },
      {
        title: '上传人员',
        dataIndex: 'operator',
        key: 'operator'
      },
      {
        title: '上传时间',
        key: 'createTime',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        slots: { customRender: 'action' }
      }
    ]
    // 管理工艺单各个模块的显示 lx
    const { showWeight } = useManagerModuleDisplay([props])
    const sewingModules = useSewing(processState)
    //
    const uploadLogsData = ref([])
    const uploadLogsVoisible = ref(false)
    const showUploadLog = async () => {
      uploadLogsVoisible.value = true
      const { success, data, retInfo } = await cp_card_list_paper_log_get({
        processId: props.processId
      })
      if (success) {
        uploadLogsData.value = data
      } else {
        message.error(retInfo)
      }
    }

    const saveSizeConfig = async () => {
      const hasEmpty = processState.sizeConfigDatas.some(
        item => !item.sizeBase || !item.sizeStart || !item.sizeEnd
      )
      if (hasEmpty) return message.error('请先选择尺码范围和计算列')
      const { success, retInfo } = await cp_card_update_config_size_post({
        cp: props.cp,
        configCpSizeList: processState.sizeConfigDatas,
        sizeModels: processState.sizeModels
      })
      if (success) {
        message.success(retInfo)
        processState.showSizeConfig = false

        fetchData()
      } else {
        message.error(retInfo)
      }
    }
    const addOptimizeLine = () => {
      emit('addLine')
    }

    const { weightState, autoCalcWeight } = useCalcWeight(processState, props)
    // 处理高亮 lx
    const {
      addHightLight,
      clearHight,
      changeHightLight,
      deleteHight,
      emptyList,
      delteItems
    } = useHightLight(processState)
    // 初始化
    const { fetchData, spinning } = useInit(props, emit, processMethods)

    onMounted(() => {
      fetchData()
    })
    watch([() => props.isOptimize, () => props.optimizeVos], () => {
      console.log('watch监听')
      if (props.isOptimize && props.optimizeVos.length) {
        processState.designInfo.optimizeVos = props.optimizeVos
      } else if (!props.isOptimize) {
        processState.designInfo.optimizeVos = []
      }
    })
    return {
      jexcelSize,
      weightState,
      autoCalcWeight,
      showWeight,
      calcModuleDisable,
      weightInfo,
      ...processMethods,
      partOptions,
      spinning,
      refresh: fetchData,
      ...toRefs(processState),
      addHightLight,
      changeHightLight,
      imgList,
      clearHight,
      delteItems,
      emptyList,
      deleteHight,
      saveSizeConfig,
      addOptimizeLine,
      ...sewingModules,
      showUploadLog,
      uploadLogsData,
      uploadLogsVoisible,
      uploadLogsColumns,
      toDownload
    }
  }
}
</script>
<style lang="scss" scoped>
.weight-form {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
  text-align: center;
  background-color: #f3f3f3;
  .ant-row-flex {
    flex-wrap: nowrap;
  }
  span {
    display: inline-block;
  }
  span:last-child {
    color: #d8d5d5;
  }
}
:deep(.ant-descriptions-item-label) {
  width: 110px;
}
.lh395 {
  line-height: 395px;
}
.ant-carousel .slick-arrow.custom-slick-arrow {
  font-size: 14px;
  color: #333;
  width: 25px;
  line-height: 50px;
  text-align: center;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.6);
  /* opacity: 0.3; */
}
:deep .myCarousel {
  .slick-slider,
  .slick-slide div,
  .slick-track,
  .slick-list {
    height: 100%;
  }
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.5;
}
.custom-slick-arrow.slick-arrow.slick-prev {
  z-index: 9;
}

.uploadImg .ant-upload-picture-card-wrapper {
  width: 326px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-shrink: 0;
}
.uploadImg .ant-upload-list {
  display: flex;
}
</style>
<style>
.weightProcess .ant-table tr > td {
  padding: 0 !important;
  height: 30px;
  line-height: 30px;
}
.weightProcess .ant-table tr > td:not(:first-child),
.weightProcess .ant-table tr > th:not(:first-child) {
  text-align: center;
}
body .processDetail td.disabled {
  text-align: left !important;
  border-bottom: unset !important;
  border-right: 0 !important;
  background-color: rgba(250, 250, 250, 1) !important;
  color: #262626 !important;
}
.jexcel .disabled.highlight-bottom {
  border-bottom: unset !important;
}
.jexcel .disabled.highlight-right {
  border-right: unset !important;
}
.jexcel .disabled.highlight-left {
  border-left: unset !important;
  box-shadow: unset !important;
}
.jexcel .disabled.highlight-top {
  border-top: 1px solid #ccc !important;
}
.jexcel_content {
  box-shadow: unset !important;
}
.weightImg .c-upload-item {
  width: 100% !important;
  height: 400px !important;
}
.weightImg .c-upload-list {
  width: 100%;
}

.add {
  width: 100%;
  height: 32px;
  border: 1px dashed #d9d9d9;
  text-align: center;
  line-height: 32px;
  margin-top: 8px;
  cursor: pointer;
}
.add-btn {
  width: 100%;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin-top: 10px;
  cursor: pointer;
}
</style>
